<template>
  <div class="container">
    <el-row>
      <el-col class="topTitle">
        <el-col :xl="16" :lg="16" :md="14" :sm="14"
          ><div class="leftBox">
            <div>
              <i class="icon iconfont iconfanhui1" @click="goBack"></i>&nbsp;{{
                name
              }}
            </div>
          </div></el-col
        >
        <el-col :xl="8" :lg="8" :md="10" :sm="10"
          ><div class="rightBox">
            <el-row type="flex" justify="end">
              <el-col :span="12"
                ><h3>
                  总分：<span class="mainColor">{{ score }}分</span>
                </h3></el-col
              >
              <el-col :span="12"
                ><h3>
                  总考核项：<span class="mainColor">{{ total }}分</span>
                </h3></el-col
              >
            </el-row>
          </div></el-col
        >
      </el-col>
    </el-row>
    <div class="mainCon">
      <el-table
        :data="tableList"
        v-loading="loading"
        :header-cell-style="{ background: '#eef1f6', color: '#333' }"
        highlight-current-row
        stripe
        style="border: 1px solid #dfe6ec"
        :cell-style="{ color: '#333' }"
      >
        <el-table-column
          prop="typeName"
          label="类别"
          align="center"
          :formatter="formatTd"
        ></el-table-column>
        <!-- <el-table-column prop="itemName" label="考核项目" align="center" :formatter=formatTd></el-table-column>  -->
        <el-table-column prop="itemName" label="考核项目" width="230">
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.itemName"
              :columnName="'itemName'"
            ></copyText>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="content" label="考核事项" align="center" :show-overflow-tooltip="true"></el-table-column> -->
        <el-table-column prop="content" label="考核事项" width="230">
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.content"
              :columnName="'content'"
            ></copyText>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="illustration" label="标准说明" align="center" ></el-table-column> -->
        <el-table-column prop="illustration" label="标准说明" width="230">
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.illustration"
              :columnName="'illustration'"
            ></copyText>
          </template>
        </el-table-column>
        <el-table-column
          prop="score"
          label="标准分值"
          align="center"
        ></el-table-column>
        <!-- 表格数据为空时，页面显示 -->
        <div slot="empty" v-show="isShow">
          <emptyTable emptyText="暂无相关信息"></emptyTable>
        </div>
      </el-table>
    </div>

    <el-dialog
      :close-on-click-modal="false"
      title="提交自评"
      :visible.sync="selEvalutionDialog"
      width="30%"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <span>您还有三项未自评，暂不能提交评价</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selEvalutionDialog = false">取 消</el-button>
        <el-button type="primary" @click="selEvalutionDialog = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'evalutionProofList',
  data() {
    return {
      id: '',
      name: '',
      score: '',
      total: '',
      selEvalutionDialog: false,
      //表格数据
      tableList: [],
      isShow: false, //列表加载
      loading: false,
    }
  },
  created() {
    this.id = this.$route.query.id
    this.name = this.$route.query.name
    this.score = this.$route.query.score
    this.total = this.$route.query.total
    this.getDetail(this.id)
  },
  methods: {
    getDetail(id) {
      this.axios({
        method: 'post',
        url: 'api-gov/assesstemplatedetail/expand/templatedetail',
        data: {
          templateId: id,
        },
      })
        .then((response) => {
          this.tableList = response.data.result
        })
        .catch((error) => {})
    },
    goBack() {
      this.$router.go(-1)
    },
  },
}
</script>

<style scoped lang="less">
.mainColor {
  color: #009588;
}
.topTitle {
  background-color: #fff;
  border-bottom: 1px solid #e3e7e9;
  height: 67px;
  padding: 24px;
  font-family: 'Microsoft YaHei';
  font-size: 18px;
  font-weight: bold;
  vertical-align: middle;
  .rightBox {
    margin-right: 24px;
    text-align: right;
    h3 {
      color: #333;
      font-size: 16px;
    }
  }
}

.mainCon {
  padding-left: 24px;
  padding-right: 24px;
  height: calc(100% - 67px);
  overflow-y: auto;
}

.nav ul {
  list-style: none;
}

.nav li {
  display: block;
  float: left;
}
/deep/ .el-dialog__footer {
  background: #fff;
  padding-bottom: 70px;
}
</style>
<style>
.el-tooltip__popper {
  max-width: 30% !important;
  word-break: break-all;
}
</style>
